<template>
  <div class="inp">
    <input
      type="text"
      placeholder="Add new todo..."
      class="inp1"
      v-model="counter"
      @keydown.enter="add"
    />
    <img src="../../public/2.jpg" alt="" @click="add" />
  </div>
</template>

<script>
import { reactive, toRefs, defineProps } from 'vue'
//引入定义的数据
import { userInfo } from '@/stores/userInfo'
export default {
  setup(props, context) {
    defineProps({
      counter: {
        type: String
      }
    })
    //调用方法
    const store = userInfo()
    const data = reactive({
      counter: ''
    })
    const add = () => {
      if (data.counter == '') {
        alert('内容不能为空哦')
        return false
      }
      let obj = {
        counter: data.counter,
        checked: false
      }
      context.emit('add', obj)
      data.counter = ''
    }
    return {
      ...toRefs(data),
      add
    }
  }
}
</script>
<style lang="scss" scoped>
.inp {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  display: flex;
  .inp1 {
    width: 48%;
    height: 100%;
    border: 0;
    border-bottom: 3px dashed #fe7345;
    outline: 0;
    background-color: #f2f2f2;
    margin-left: 80px;
  }
  img {
    width: 20%;
    height: 50px;
    margin-left: 5px;
  }
}
</style>
